<template>
  <div class='u-costDetailDialog' ref="costDetailDialog" :visible.sync="dialogVisible">
    <el-dialog ref='dialog'
               :title="`${title}的收支明细`"
               :visible.sync="dialogVisible"
               :before-close="() => {this.dialogVisible = false}"
    >
      <a-table :data='data' :cols='tableKeys'>
        <el-table-column align="center" label="操作" width='120'>
          <template slot-scope="scope">
            <div>
              <el-button size='mini' type='primary' @click="modify(scope.$index)">修改</el-button>
              <el-button size='mini' @click="deleteObj(scope.row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </a-table>
      <div v-show='isShowFrom' class="title">{{ formType === 'add' ? '请填写表单，并点击“勾”确认提交' : '点击“勾”确认修改' }}</div>
      <el-row class='u-costDetailDialog_row'  :gutter="5" v-show='isShowFrom'>
        <el-col :span='5'>
          <el-input v-model.trim='form.name' placeholder='请输入名称'/>
        </el-col>
        <el-col :span='5'>
          <el-input v-model.trim='form.memo' placeholder='请输入备注'/>
        </el-col>
        <el-col :span='5'>
          <el-input v-model.trim='form.price' placeholder='请输入单价'/>
        </el-col>
        <el-col :span='5'>
          <a-select v-model='form.type' :options='typeList'/>
        </el-col>
        <el-col :span='3' style='padding-left: 5px;'>
          <i class='el-icon-check' @click="add"></i>
          <i class='el-icon-close' @click='clearForm'></i>
        </el-col>
      </el-row>
      <div class='u-pagination'>
        <!-- 分页 -->
        <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
      </div>
      <div>
        <el-button type='primary ' @click="setFormType">添加收支</el-button>
        <el-button @click="dialogVisible=false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- <sku-dialog ref='skuDialog' @getData='getData' :selectSkuIds='selectSkuIds' /> -->
  </div>
</template>

<script>
  import { billGoodsType } from '@/api/billGoodsType'
  import {mapMutations} from 'vuex'
  import skuDialog from './skuDialog'

  export default {
    name: 'u-costDetailDialog',
    components: {
      skuDialog
    },
    props: ['id', 'title'],

    data() {
      const filterBuildType = (value) => {
        return value === '1' ? '自动生成' : '手工输入'
      }
      const filterGodosType = (value) => {
        return billGoodsType.filter(v => v.value === value)[0].label
      }
      return {
        dialogVisible: false,
        data: [],
        tableKeys: [
          {prop: 'name', label: '名称', minWidth: '100'},
          {prop: 'memo', label: '备注', minWidth: '100'},
          {prop: 'price', label: '单价', minWidth: '100'},
          // {prop: 'amount', label: '合计金额', minWidth: '100', filter: window.$tools.filterPrice},
          {prop: 'amount', label: '合计金额', minWidth: '100'},
          {prop: 'type', label: '收支类别', minWidth: '100', filter: filterGodosType},
          {prop: 'create_type', label: '生成方式', minWidth: '100', filter: filterBuildType}
        ],
        form: {
          name: '',
          memo: '',
          price: '',
          type: '',
          id: ''
        },
        typeList: billGoodsType,
        isAdd: true,
        aSkuId: '',
        isRequire: false,
        ifRequesting: false,
        isShowFrom: false,
        formType: 'add' // 编辑类型
      }
    },

    methods: {
      ...mapMutations(['setTabRoutes']),

      routerPush(type, args) {
        // push 到缓存里
        this.setTabRoutes({type: 'add', obj: {...this.getRouterInfoAccordingName(type), ...args}})
      },
      async fetchData(aPageNum, aPageSize) {
        return this.$api.inventGetBillGoodsCosts({aBillId: this.id, aSkuId: this.aSkuId})
      },

      getData(data) {
        this.data = data
      },

      $show(aSkuId) {
        this.aSkuId = aSkuId
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs.page.changePage()
        })
      },

      remove(i) {
        this.data.splice(i, 1)
      },

      modify(index) {
        const { name, price, memo, type, id } = this.data[index]
        // 填充表单
        this.form.name = name
        this.form.price = price
        this.form.memo = memo
        this.form.type = type
        this.formType = 'edit'
        this.form.id = id
        this.isShowFrom = true
      },

      deleteObj(id) {
        if (this.ifRequesting) return false
        this.__messageBox({
          title: '你确认要删除该收支明细吗？',
          successCallback: async () => {
            this.ifRequesting = true
            const {code} = await this.$api.inventDeleteBillGoodsCost({ aId: id })
            this.ifRequesting = false
            this.$refs.page.changePage()
            return code
          }
        })
      },

      async add() {
        const { name, type, price, memo, id } = this.form
        if (!name || !type || !price) {
          this.__notify('提示', '请填写完整表单', 'warning')
          return false
        }
        this.isRequire = true
        const params = {
          aName: name,
          aType: type,
          aPrice: price,
          aMemo: memo
        }
        if (this.formType === 'add') {
          params.aBillId = this.id
          params.aSkuId = this.aSkuId
        } else {
          params.aId = id
        }
        const {code} = await this.$api[this.formType === 'add' ? 'inventAddBillGoodsCost' : 'inventModifyBillGoodsCost'](params)
        this.isRequire = false
        if (code === 0) {
          this.__notify('提示', '操作成功')
          this.$refs.page.changePage()
          this.clearForm()
          this.isShowFrom = false
        }
      },

      clearForm() {
        Object.keys(this.form).forEach(v => {
          this.form[v] = ''
        })
        this.formType = 'add'
      },

      setFormType() {
        this.clearForm()
        this.isShowFrom = true
      }
    },
    filters: {
    }
  }
</script>

<style lang='less'>
.u-costDetailDialog {
  &_row {
    display: flex;
    align-items: center;
    padding-top: 20px;
  }
}
</style>
